<template>
  <div class="manage">
    <div class="shop flex-a" @click="jumpTo('/packageA/pages/addStore/index?openId=' + state.openId)">
      <div class=" left">
        <img :src="state.info.storeLogo" alt="">
      </div>
      <div class="right">
        <div class="name">{{ state.info.storeName }}
          <RectRight color="#fff" size="14" />
        </div>
        <div><span style="color:#fff;margin-top: 10rpx;font-size: 26rpx;">{{ state.info.place }}&nbsp;{{
      state.info.initPlace }}</span>
        </div>
        <div class="flex-a flex-b">
          <div class="tap">点击查看门店详情</div>
          <!-- <div class="btn">
            <picker mode="selector" :range="state.selector" @change="onChange">
              <view class="picker">
                {{ state.selectorChecked }}
                <TriangleDown size="14" color="#fff" />
              </view>
            </picker>
          </div> -->
        </div>
      </div>
    </div>
    <!-- <div class="study flex-a flex-b">
      <div>调查：贝安数智商户满意度调查</div>
      <Close color="#C3BEB4" size="14" />
    </div> -->
    <!-- <div class="server flex-a"> -->
    <nut-grid class="server flex-a" :column-num="3" square>
      <nut-grid-item text="商品" @click="addGoods">
        <img style="width:40px;height: 40px;" src="https://cxj.szzkba.cn/upload/i/2024/02/29/112801.png" alt="">
      </nut-grid-item>
      <nut-grid-item text="财务" @click="finStatistic">
        <img style="width:40px;height: 40px;" src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949.png" alt="">
      </nut-grid-item>
      <nut-grid-item text="配送">
        <img style="width:40px;height: 40px;" src="https://cxj.szzkba.cn/upload/i/2024/04/10/185138.png" alt="">
      </nut-grid-item>
    </nut-grid>
    <!-- <div class="item" @click="addGoods">
        <div><img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112801.png" alt=""></div>
        <div>商品</div>
      </div>
      <div class="item">
        <div><img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948_2.png" alt=""></div>
        <div>评价</div>
      </div>
      <div class="item">
        <div><img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949.png" alt=""></div>
        <div>财务</div>
      </div>
      <div class="item">
        <div><img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_10.png" alt=""></div>
        <div>配送</div>
      </div> -->
    <!-- </div> -->
    <div class="data">
      <div class="head flex-a flex-b">
        <div>经营数据</div>
        <!-- <div class="flex-a">
          <span>更多</span>
          <RectRight color="#C6C6CA" sieze="10" />
        </div> -->
      </div>
      <div class="list">
        <div class="item">
          <div>今日营业额</div>
          <div>
            <nut-row></nut-row>
            {{ state.statisticInfo.amountT }}
          </div>
          <div class="flex-a"><span style="margin-left: 10%;font-size: 20rpx;">昨日&nbsp;{{ state.statisticInfo.amountY
              }}</span>
            <nut-trend-arrow :show-sign="true" style="font-size:20rpx;margin-left: 5%;"
              :rate="state.statisticInfo.amountRate">
            </nut-trend-arrow>
          </div>
        </div>
        <div class="item">
          <div>今日订单</div>
          <div>{{ state.statisticInfo.orderNumT }}</div>
          <div class="flex-a"><span style="margin-left: 10%;font-size: 20rpx;">昨日&nbsp;{{ state.statisticInfo.orderNumY
              }}&nbsp;单</span>
            <nut-trend-arrow :show-sign="true" style="font-size:20rpx;margin-left: 5%;"
              :rate="state.statisticInfo.orderRate">
            </nut-trend-arrow>
          </div>
        </div>
        <div class="item">
          <div>客单价</div>
          <div>{{ state.statisticInfo.sigleNumT }}</div>
          <div class="flex-a"><span style="margin-left: 10%;font-size: 20rpx;">昨日&nbsp;{{ state.statisticInfo.sigleNumY
              }}</span>
            <nut-trend-arrow :show-sign="true" style="font-size:20rpx;margin-left: 5%;"
              :rate="state.statisticInfo.sigleRate">
            </nut-trend-arrow>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="data">
      <div class="head flex-a flex-b">
        <div>营销活动</div>
        <div class="flex-a">
          <span>更多</span>
          <RectRight color="#C6C6CA" sieze="10" />
        </div>
      </div>
      <div class="list">
        <div class="item">
          <div>可报名</div>
          <div class="num">2</div>
        </div>
        <div class="item">
          <div>已参加</div>
          <div class="num">6</div>
        </div>
        <div class="item">
          <div>已自建</div>
          <div class="num">5</div>
        </div>
      </div>
    </div> -->
    <div class="tool">
      <div class="head">实用工具</div>
      <div class="list">
        <div class="item" v-for=" item  in  state.list " :key="item.id" @click="jumpTo(item.to)">
          <img :src="item.url" alt="">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- <div class="tool" style="padding-bottom: 100rpx;">
      <div class="head">服务市场</div>
      <div class="list">
        <div class="item" v-for="item in state.market" :key="item.id">
          <img :src="item.url" alt="">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, onMounted } from 'vue';
import { RectRight, TriangleDown, Close, TriangleUp } from '@nutui/icons-vue-taro';
import { getStoreInfo, getStatistic } from '../../../api/index'
export default {
  components: {
    RectRight,
    TriangleDown,
    Close,
    TriangleUp,
  },
  setup() {
    const state = reactive({
      info: {},
      statisticInfo: {},
      selector: ['营业中', '休息中'],
      selectorChecked: '营业中',
      list: [
        {
          id: 0,
          url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_9.png',
          name: '门店福利',
          to: '/packageA/pages/couponList/index',
        },
        // {
        //   id: 1,
        //   url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_7.png',
        //   name: '服务保障',
        // },
        // {
        //   id: 2,
        //   url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/134542.png',
        //   name: '店铺推广',
        // },
        // {
        //   id: 3,
        //   url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_16.png',
        //   name: '商家学院',
        // },
        // {
        //   id: 4,
        //   url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112948_1.png',
        //   name: '信用分',
        // },
        // {
        //   id: 4,
        //   url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_5.png',
        //   name: '合作方案',
        // },
        // {
        //   id: 5,
        //   url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_6.png',
        //   name: '蜂鸟自营销',
        // },
      ],
      market: [
        {
          id: 0,
          url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_4.png',
          name: '二维码推广',
        },
        {
          id: 1,
          url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_13.png',
          name: '食材采购',
        },
        {
          id: 2,
          url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_1.png',
          name: '餐具优选',
        },
      ],
      openId: '',
    });
    onMounted(() => {
      Taro.getStorage({
        key: 'user',
        success: function (res) {
          if (res.data.openId) {
            state.openId = res.data.openId
            getStoreInfo(res.data.openId).then(respon => {
              if (respon.code == 200) {
                state.info = respon.data
              }
            })
            getStatistic().then(respon => {
              if (respon.code == 200) {
                let amountT = respon.data.order[0].value
                let orderNumT = respon.data.order[1].value
                let sigleNumT = respon.data.order[2].value
                let amountY = respon.data.order[0].mapList[0].value
                let orderNumY = respon.data.order[1].mapList[0].value
                let sigleNumY = respon.data.order[2].mapList[0].value
                let amountRate = 0
                let orderRate = 0
                let sigleRate = 0
                if (amountY != 0) {
                  if (amountT != 0) {
                    amountRate = (amountT - amountY) / amountY
                  } else {
                    amountRate = amountY * -1
                  }
                }
                if (orderNumY != 0) {
                  if (orderNumT != 0) {
                    orderRate = (orderNumT - orderNumY) / orderNumY
                  } else {
                    orderRate = orderNumY * -1
                  }
                }
                if (sigleNumY != 0) {
                  if (sigleNumT != 0) {
                    sigleRate = (sigleNumT - sigleNumY) / sigleNumY
                  } else {
                    sigleRate = sigleNumY * -1
                  }
                }
                state.statisticInfo = { amountT: amountT, amountY: amountY, orderNumT: orderNumT, orderNumY: orderNumY, sigleNumT: sigleNumT, sigleNumY: sigleNumY, amountRate: amountRate, orderRate: orderRate, sigleRate: sigleRate }
                console.log(amountRate)
              }
            })
          }
        }
      })
    });
    const jumpTo = (path) => {
      Taro.navigateTo({
        url: path
      })
    }
    const onChange = (e) => {
    }
    const addGoods = () => {
      if (state.openId) {
        jumpTo('/packageA/pages/goods/index')
      } else {
        Taro.showToast({
          title: '商家未入驻',
          icon: 'error',
          duration: 2000
        })
      }
    }
    const finStatistic = () => {
      if (state.openId) {
        jumpTo('/packageA/pages/promotion/index')
      } else {
        Taro.showToast({
          title: '商家未入驻',
          icon: 'error',
          duration: 2000
        })
      }
    }
    return { state, onChange, jumpTo, addGoods, finStatistic };
  }
};
</script>

<style lang="scss">
.manage {
  .shop {
    position: relative;
    background: #3F8EE3;
    padding: 30rpx 0 30rpx 30rpx;

    .left {
      img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 5rpx;
        border: 6rpx solid #EAF1F0;
        margin-right: 20rpx;
      }
    }

    .right {


      .name {
        // margin-bottom: 50rpx;
        color: #fff;
        font-size: 30rpx;
      }

      .tap {
        color: #A5D2F3;
        margin-top: 10rpx;
        font-size: 24rpx;
      }

      .btn {
        background: #3579C1;
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 60rpx 0 0 60rpx;
        color: #fff;
        position: absolute;
        right: 0;
      }
    }
  }

  .study {
    background: #FDF6E8;
    padding: 30rpx;
    color: #E3AB44;
  }

  .server {
    margin: 20rpx 0;
    background: #fff;

    color: #929292;
    font-size: 26rpx;

    .item {
      width: 25%;
      padding: 40rpx 0;
      text-align: center;

      img {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .item:not(:last-child) {
      border-right: 1rpx solid #F7F7F7;
    }
  }

  .data {
    background: #fff;
    margin-bottom: 30rpx;

    .head {
      padding: 20rpx 30rpx;
      color: #292929;
      font-size: 32rpx;
      border-bottom: 1rpx solid #F3F3F3;

      span {
        color: #5B5B5B;
        font-size: 28rpx;
      }
    }

    .list {
      padding: 30rpx 0;

      .item {
        display: inline-block;
        width: 33.33%;
        text-align: center;
        box-sizing: border-box;

        div:first-child {
          color: #4D4D4D;
        }

        div:nth-child(2) {
          color: #262626;
          font-size: 38rpx;
          margin: 10rpx 0 20rpx;
        }

        div:last-child {
          color: #9F9F9F;
          font-size: 26rpx;
        }

        div.num {
          color: #262626;
          font-size: 38rpx;
          margin: 10rpx 0 20rpx;
        }
      }

      .item:not(:last-child) {
        border-right: 1rpx solid #F3F3F3;
      }
    }
  }

  .tool {
    background: #fff;
    margin-bottom: 30rpx;

    .head {
      padding: 20rpx 30rpx;
      color: #292929;
      font-size: 32rpx;
      border-bottom: 1rpx solid #F3F3F3;
    }

    .list {

      .item {
        text-align: center;
        display: inline-block;
        width: 33.33%;
        box-sizing: border-box;
        border-right: 1rpx solid #F6F6F6;
        border-bottom: 1rpx solid #F6F6F6;
        padding: 50rpx 0;

        img {
          width: 60rpx;
          height: 60rpx;
        }

        span {
          font-size: 28rpx;
          color: #727272;
        }
      }
    }
  }
}
</style>